<template>
    <div class="search">
     <!--   <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="部门" prop="department">
                                <department-choose @on-change="handleSelectDep" style="width: 200px" ref="dep"></department-choose>
                            </Form-item>
                            <Form-item label="数据分段" prop="username">
                                <Input
                                        type="text"
                                        v-model="pageSize"
                                        clearable
                                        placeholder="最高500条每页"
                                        style="width: 200px"
                                />
                            </Form-item>

                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="getUserListBySize" type="primary" icon="ios-search">分段搜索</Button>
                                &lt;!&ndash;<Button @click="handleSearch" type="primary" icon="ios-search">检索全部数据</Button>&ndash;&gt;
                                <Button @click="handleReset">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>

                    <Row>
                        &lt;!&ndash;穿梭框&ndash;&gt;
                        <Transfer
                                :data="data3"
                                :target-keys="targetKeys3"
                                :list-style="listStyle"
                                :render-format="render3"
                                :operations="['解除限制','添加限制']"
                                :titles="['未限制名单', '已限制名单']"
                                filterable
                                @on-change="handleChange3">
                            &lt;!&ndash;  <div :style="{float: 'right', margin: '5px'}">
                                  <i-button type="ghost" size="small" @click="reloadMockData">刷新</i-button>
                              </div>&ndash;&gt;
                        </Transfer>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :page-size="searchForm.pageSize" :total="total"  simple @on-change="changePage"></Page>
                    </Row>

                </Card>
            </Col>
        </Row>-->
        <Modal
                title="网络权限设置"
            v-model="accessControlVisible"
            :mask-closable="false"
            :width="50%100"
            :styles="{top: '30px'}"
            >
            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                <Form-item label="用户名称" prop="username">
                    <Input
                            type="text"
                            v-model="searchForm.username"
                            clearable
                            placeholder="请输入用户名"
                            style="width: 200px"
                    />
                </Form-item>

                <Form-item label="部门" prop="department">
                    <department-choose @on-change="handleSelectDep" style="width: 200px" ref="dep"></department-choose>
                </Form-item>
                <Form-item label="数据分段" prop="username">
                    <Input
                            type="text"
                            v-model="searchForm.pageSize"
                            clearable
                            placeholder="最高500条每页"
                            style="width: 200px"
                    />
                </Form-item>

                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="getUserListBySize" type="primary" icon="ios-search">分段搜索</Button>
                    <!--<Button @click="handleSearch" type="primary" icon="ios-search">检索全部数据</Button>-->
                    <Button @click="handleReset">重置</Button>
                </Form-item>
            </Form>
            <div >
            <!--穿梭框-->
            <Transfer
                    :data="data3"
                    :target-keys="targetKeys3"
                    :list-style="listStyle"
                    :render-format="render3"
                    :operations="['解除限制','添加限制']"
                    :titles="['未限制名单', '限制名单']"
                    filterable
                    @on-change="handleChange3">
                <!--  <div :style="{float: 'right', margin: '5px'}">
                      <i-button type="ghost" size="small" @click="reloadMockData">刷新</i-button>
                  </div>-->
            </Transfer>
            </div>

            <div slot="footer">
                <Page :current="searchForm.pageNumber" :page-size="searchForm.pageSize" :total="acuTotal"  simple @on-change="changePage"></Page>
                <br>
            </div>
            <div slot="footer">
                <Button type="text" @click="cancelAccessControl">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitAccessControl">提交</Button>
            </div>
        </Modal>
    </div>

</template>
<script>

    import {
        getUserByAc,
        addAcUserBySys
    } from "@/api/manage";
    import departmentChoose from "../../my-components/xboot/department-choose";

    export default {
        components: {
            departmentChoose
        },
        data () {
            return {
                //网络权限设置弹窗开关变量
                accessControlVisible: true,
                acuTotal: 0,
                //添加提交表单对象
                ACForm: {
                    users: "",
                    //应用系统id
                    sysId: "167074391371288576",
                },
                //查询提交表单对象
                searchForm: {
                    sysId: "167074391371288576",
                    username: "",
                    departmentId: "",
                    mobile: "",
                    email: "",
                    sex: "",
                    type: "",
                    status: "",
                    pageNumber: 1,
                    pageSize: 10,
                    sort: "createTime",
                    order: "desc",
                    startDate: "",
                    endDate: ""
                },
                acudata: [],
                data3: [],
                targetKeys3: [],
                listStyle: {
                    width: '340px',
                    height: '400px'
                },

            }
        },
        methods: {
            init() {
                this.getUserList();
            },
            getUserList() {
                // 多条件搜索用户列表
                //getUserListData(this.searchForm).then(res => {
                getUserByAc(this.searchForm).then(res => {
                    if (res.success == true) {
                        this.acudata = res.result.records;
                        this.acuTotal=res.result.total;
                        this.pages=res.result.pages;
                        //alert(this.data.length);
                        //vue 遍历list对象
                       /* this.data.forEach((item,i) => {
                            console.log("forEach循环==i==",i);
                            //item.age = 27
                            console.log(item.username+"test")
                            alert(444);
                            alert(item.username+"test")
                        })*/
                        this.data3=this.getMockData();
                    }
                });


            },
            getUserListBySize() {
              console.log("分段检索");
              //this.searchForm.pageSize=this.pageSize;
                this.acuTotal=0;
                getUserByAc(this.searchForm).then(res => {
                    if (res.success == true) {
                        this.acudata = res.result.records;
                        this.acuTotal=res.result.total;
                        this.pages=res.result.pages;
                        //在点击搜索按钮是先将左右穿梭框的数据清空 begin
                        this.data3= [];
                        this.targetKeys3= [];
                        //在点击搜索按钮是先将左右穿梭框的数据清空 end
                        this.data3=this.getMockData();
                    }
                });
            },


            getMockData () {
                let mockData =this.data3;
               /* for (let i = 1; i <= this.data.length; i++) {
                    alert(333);
                    //alert(i.toString()+"i.toString()");
                    mockData.push({
                        //key: i.toString(),
                        key: this.data.get(i).username.toString(),
                        label: '内容' + i,
                        description: '内容' + i + '的描述信息',
                        //disabled: Math.random() * 3 < 1
                    });
                }*/
                this.acudata.forEach((item,i) => {
                    console.log("forEach循环==i==",i);
                    //item.age = 27
                    console.log(item.username+"test")
                    //alert(444);
                    //alert(i.toString()+"i.toString()");
                    //alert(item.username+"test")
                    mockData.push({
                        //key: (i+1).toString(),
                        key: (item.username).toString(),
                        label: item.username,
                        description: "姓名:" +item.nickName,
                        //disabled: Math.random() * 3 < 1
                    });
                })
                return mockData;
            },


            getTargetKeys () {
                return this.getMockData()
                    .filter(() => Math.random() * 2 > 1)
                    .map(item => item.key);
            },
            handleChange3 (newTargetKeys) {
                this.targetKeys3 = newTargetKeys;

                this.targetKeys3.forEach((item,i) => {
                    console.log("targetKeys3:forEach循环==i==",i);
                    //item.age = 27
                    console.log(item.toString());

                })
            },
            render3 (item) {
                return item.label + ' - ' + item.description;
            },
            reloadMockData () {
                this.data3 = this.getMockData();
                //this.targetKeys3 = this.getTargetKeys();
            },
            changePage(v) {
                if(v>this.searchForm.pageNumber){
                   // alert("点击的是下一页正常操作");
                    this.searchForm.pageNumber = v;
                    this.getUserList();

                }else{
                    alert("第"+v+"页数据已经加载请勿重复加载");
                }

            },
            handleSelectDep(v) {
                this.searchForm.departmentId = v;
            },
            handleReset() {
                this.clearData();
            },
            cancelAccessControl() {
                this.accessControlVisible = false;
                this.clearData();
            },
            submitAccessControl(){
                this.clearData();
             console.log("submitAccessControl")
                console.log(this.targetKeys3.toString())
                this.targetKeys3.forEach((item,i) => {
                    console.log(item.toString());
                })
                this.ACForm.users=this.targetKeys3.toString();
                addAcUserBySys(this.ACForm).then(res => {
                    if (res.success == true) {
                        alert("接口调用成功");
                    }
                });


            },
            //清空输入框数据和穿梭框数据并初始化
            clearData(){
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                this.selectDep = [];
                this.searchForm.departmentId = "";
                //重置左右穿梭框的数据
                this.data3= [];
                this.targetKeys3= [];
                // 重新加载数据
                this.getUserList();
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
